const path = require('path'); 
const glob = require('glob'); // 文件扫描有用，消除无用css时
const UglifyPlugin = require('uglifyjs-webpack-plugin');  // 打包压缩js
const HTMLPlugin = require('html-webpack-plugin');  // 打包html
const ExtractPlugin = require('extract-text-webpack-plugin'); // css，less，sass分离
const PurifyCSSPlugin = require('purifycss-webpack');   // 消除无用的css
const entry = require('./webpack_config/entry_webpack');
const webpack = require('webpack'); // 优雅的引用第三方库
const CopyWebpackPlugin = require('copy-webpack-plugin');

let website;
if (process.env.type=="build") {
  website = {
    publicPath: "http://wechatshop.com/"
  }
} else {
  website = {
    publicPath: "http://localhost:9090/"
  }
}
module.exports = {
  devtool: 'source-map',
  entry: entry.path,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: website.publicPath
  },
  // module不需要引入，插件才需要引入
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractPlugin.extract({
          fallback: 'style-loader',
          use: [
            {loader: 'css-loader'},
            'postcss-loader'
          ]
        })
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 5000,       // 小于5000bte会自动转换为base64，减少http请求
              outputPath: 'images/'   // 设置图片打包的路径  /dist/images/
            }
          }
        ]
      },
      {
        test: /\.(html|htm)$/i,
        use: [
          {loader: 'html-withimg-loader'}
        ]
      },
      {
        test: /\.less$/,
        // 第一种use写法会，将less加载的js里面去
        // use: [
        //   {loader: 'style-loader'},
        //   {loader: 'css-loader'},
        //   {loader: 'less-loader'}
        // ],
        // 第二种use写法会，将less分离出来dist/css/文件夹中
        use: ExtractPlugin.extract({
          use: [
            {loader: 'css-loader'},
            {loader: 'less-loader'}
          ],
          fallback: 'style-loader'
        })
      },
      {
        test: /\.(jsx|js)$/,
        use: {
          loader: 'babel-loader',
        },
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['jquery', 'vue'],       // 只有一个第三方库的时候可以使用字符串，多个使用数组
      filename: 'assets/js/[name].js',
      minChunks: 2        // 这个最低是2
    }),
    // new UglifyPlugin(),
    new webpack.ProvidePlugin({   // 优雅的引入jquery
      $: "jquery"
    }),
    new HTMLPlugin({
      minify: {
        removeAttributeQuotes: true       // 移除html标签属性值的引号
      },
      hash: true,                         // 可以防止浏览器缓存文件
      template: './src/index.html'        // html模板文件
    }),
    new ExtractPlugin('css/index.css'),
    new PurifyCSSPlugin({                 // 消除无用css
      paths: glob.sync(path.join(__dirname, 'src/*.html'))
    }),
    // 给打包文件头部添加描述
    new webpack.BannerPlugin('这是呱呱二号的文件头自定义描述'),
    // 静态文件打包
    new CopyWebpackPlugin([{
      from: __dirname + '/src/public/',     // 静态文件打包入口
      to: './public'                        // 静态文件打包出口
    }])
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),   // 至于为什么要用这个
    host: 'localhost',
    compress: true,     // 是否使用服务器压缩
    port: 9090,         // 端口
  },
  watchOptions: {               // 这是参数是配置watch的
    poll: 1000,                 // 每个1000毫秒检测一次
    aggregeateTimeout: 500,     // 防止500毫秒内重复保存，只编译打包一次
    ignored: /node_modules/,    // 不检测node_modules这个文件夹
  }
}